<template>
  <div class="list-enginBox" :style="topic.backImg!=''?'background-image:url(' + topic.backImg +');':''">
    <!-- 蓝盾封挂网关IOCP版 -->
    <div class="container">
      <div class="enginBox">
        <div class="flex-between-center">
            <div class="enginBox-top">
              <div class="enginBox-content">
                <h1 class="enginBox-top-title">{{ topic.title }}</h1>
                <div v-html=" topic.productIntroduce "></div>
              </div>
              <div class="enginBox-bottom">
                  <div class="enginBox-content-ico">
                    <img :src="topic.logoImg" alt="" />
                  </div>
                  <h3>{{ topic.productName }}</h3>
                  <p style="font-weight: bold; color: #015ea4;">{{ topic.simpleTxt }}</p>
              </div>
            </div>
            
            <div class="enginBox-right-img">
              <img :src="topic.showImg" alt="" />
            </div>
        </div>
      </div>
    </div>

    <!--  -->
    <div class="content-box">
      <div class="container">
        <div class="flex-between-center content-hint">
          <div class="" v-for="(item, i) in topicGones" :key="i">
            <h3 :class="'content-box-ico content-box-ico-'+ [i]">{{item.topicGoneName}}</h3>
            <div v-html="item.topicGoneSimple"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 蓝盾用户展示 -->
    <div class="user-display">
      <div class="container">
        <h2 class="container-letter-space text-center">蓝盾用户展示</h2>
        <div class="contentUser">
          <div style="display: grid;grid-template-columns: repeat(4, 1fr);grid-gap: 40px;">
              <div class="contentUser-img" v-for="(item, i) in topicShowusers" :key="i">
                <img :src="item.topicUserShow" alt="" />
              </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from '@/api/index'

export default {
  name: 'list',
  data () {
    return {
      topiclist: '',
      topic: '',
      topicGones: '',
      topicShowusers: '',
      id: ''
    }
  },
  mounted () {
    // this.id = this.$route.query.id;
    api.topiclist().then(res => {
      this.topiclist = res.data.data.list
      this.id = this.topiclist[0].id
      this.topicdetails(this.id)
    })
  },
  methods: {
    topicdetails (e) {
      api.topicdetails({ id: e }).then(res => {
        this.topic = res.data.data.topic
        this.topicGones = res.data.data.topicGones
        this.topicShowusers = res.data.data.topicShowusers
      })
    }
  },

  computed: {}
}
</script>
